import React, { useEffect, useState } from "react";
import style from "./style.module.scss";
import { MyNavBar } from "../../../components";
import { useNavigate } from "react-router";
import LableBar from "../../../components/lableBar";
import StepsItem from "../../../components/stepsItem";
import { options } from "./options";
import AssignmenBar from "../../../components/assignmentBar";
import { useAppSelector } from "../../../store/hooks";
import {
  getcontinuationSign,
  getWhetherSign,
  getMyAssignmentaddSign,
  getUserInfoById,
  getFindUserTaskList,
} from "../../../api/my";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [active, setActive] = useState<number>(-1);
  const [isAccomplish, setIsAccomplish] = useState<boolean>();
  const [perfectInfo, setPerfectInfo] = useState<boolean>();

  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);
  const fetchList = async () => {
    const res = await getFindUserTaskList(userId, sessionId);
    console.log(res);

    const resp = await getcontinuationSign(userId, sessionId);
    console.log(resp);

    //查看连续签到多少天

    const {
      result: { age, weight, height },
    } = await getUserInfoById(userId, sessionId);
    if (age && weight && height) setPerfectInfo(true);
    // 查看是否完善用户信息

    const { result } = await getWhetherSign(userId, sessionId);
    console.log(result);

    //封装公共签到和未签到
    const signCommunal = () => {
      setActive(resp.result - 1);
      options.forEach((v) => {
        if (resp.result < 7) {
          if (resp.result >= v.day) {
            v.completed = true;
          }
        } else {
          v.completed = true;
          setActive(6);
          options[options.length - 1].day = resp.result;
          //连续签到大于7天的赋值给最后一项数据
        }
      });
    };
    // 查看用户当天是否签到
    if (result !== 2) {
      setIsAccomplish(true);
      signCommunal();
    } else {
      setIsAccomplish(false);
      signCommunal();
    }
  };

  useEffect(() => {
    fetchList();
  }, []);

  const handleSign = async () => {
    //签到请求签到数据
    const { message } = await getMyAssignmentaddSign(userId, sessionId);
    console.log(message);
    if (message === "签到成功" || message === "今天已签到")
      setIsAccomplish(true);
    fetchList();
  };
  return (
    <div>
      <MyNavBar
        title="我的任务"
        onClickLeft={() => {
          navigate(-1);
        }}
        style={{ backgroundColor: "#fff", height: "46px" }}
      ></MyNavBar>
      <div className={style.signBox}>
        <div className={style.signBar}>
          <LableBar title="签到条"></LableBar>
          <div className={style.signContent}>注：连续签到H币将会累积</div>
        </div>
        <div>
          <StepsItem activeStep={active} steps={options}></StepsItem>
        </div>
        <div className={style.lableBar}>
          <LableBar title="每日任务"></LableBar>
          <AssignmenBar
            assignment="签到"
            style={{ marginTop: "34px" }}
            onClick={() => {
              handleSign();
            }}
            isAccomplish={isAccomplish}
          ></AssignmenBar>
          <AssignmenBar
            assignment="首发病友圈"
            style={{ marginTop: "22px" }}
            HCurrency="+10"
            onClick={() => {
              navigate("/patient/circle/write");
            }}
          ></AssignmenBar>
          <AssignmenBar
            assignment="病友圈首评"
            style={{ marginTop: "22px" }}
            btnTheme="grenn"
            HCurrency="+10"
          ></AssignmenBar>
        </div>
        <div className={style.steps}>
          <LableBar title="一次性任务"></LableBar>
          <AssignmenBar
            assignment="完善我的信息"
            style={{ marginTop: "24px" }}
            HCurrency="+30"
            isAccomplish={perfectInfo}
            onClick={() => {
              navigate("/set/my/physical/signs");
            }}
          ></AssignmenBar>
          <AssignmenBar
            assignment="参与健康测评"
            style={{ marginTop: "22px" }}
            HCurrency="+10"
          ></AssignmenBar>
        </div>
      </div>
    </div>
  );
};

export default Index;
